<template>
  <div>
    <el-button type="success" @click="CreateFirstDir">新建</el-button>
  </div>

  <el-input
      v-model="query"
      placeholder="Please enter keyword"/>
  <el-tree :data="tableData"
           :props="props"
           @node-click="handleNodeClick"
           draggable
           default-expand-all
           :height="750"
           id="tree">
    <template #default="{ node, data }">
      <div class="tree_operation" @contextmenu="handleRightClick($event,data,node)">
        <template v-if="data.method">
          <el-icon>
            <Document/>
          </el-icon>
          <span>{{ data.name }}</span>
        </template>
        <template v-else>
          <el-icon>
            <Folder/>
          </el-icon>
          <span>{{ data.name }}</span>
        </template>
      </div>
    </template>
  </el-tree>

  <div id="custom-menu">
    <ul>
      <template v-if="!cur_data.method">
        <li @click="CreateTree">新建目录</li>
        <li @click="CreateApi">新建工具</li>
      </template>

      <li>删除</li>
    </ul>
  </div>

  <el-dialog v-model="dialogVisibleDir" title="新建目录" width="25%">
    <el-form :model="form" label-width="65px">
      <el-form-item label="目录名">
        <el-input v-model="form.name" :width="120"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleDir = false">取消</el-button>
        <el-button type="primary" @click="OnSubmit">创建</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisible" title="新建子目录" width="25%">
    <el-form :model="form" label-width="65px">
      <h3>当前目录：{{ cur_father }}</h3>
      <el-divider border-style="dashed"/>
      <el-form-item label="目录名">
        <el-input v-model="form.name" :width="120"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="OnSubmit">创建</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script setup lang="ts">
import {onMounted, reactive, ref} from "vue"
import Node from "element-plus/es/components/tree/src/model/node"

const prop = defineProps(["tool", "meau" ])
const emit = defineEmits(["ChangeFather"])
const cur_father = ref("")
const cur_data = ref({
  name:null,
  id:null,
  childs:[]
})
const cur_node = ref(Node)
const dialogVisible = ref(false)
const dialogVisibleDir = ref(false)
const query = ref('')
const meau = prop.meau
const tableData = ref([])
let form = reactive({
  name: "",
  father: 0,
})

const props = {
  value: 'name',
  label: 'name',
  children: 'childs',
}

const CreateFirstDir = () =>{
  dialogVisibleDir.value = true
  cur_data.value = null
}

onMounted(() => {
  var tree = document.getElementById("tree");
  tree.addEventListener('contextmenu', function (event) {
    event.preventDefault(); // 取消默认的右键菜单行为
  })

  document.addEventListener('mouseup', function (event) {
    if (event.button === 1 || event.button == 0) { // event.button表示按下的鼠标按钮编号，2表示右键
      var customMenu = document.getElementById("custom-menu");
      if (customMenu) {
        customMenu.style.display = "none";
      }

    }
  });
  ListToolMeau()
})


const handleNodeClick = async (data, node) => {
  cur_data.value = data
  cur_node.value = node
  emit("ChangeFather", data, false)

  if (data.childs == undefined) {
    data.childs = []
  }
  if (data.method) {
    return
  }

  if (data.childs.length != 0) {
    return
  }

  data.childs = await ListToolChild2(data.id)
}

function handleRightClick(event, data, node) {
  var customMenu = document.getElementById("custom-menu");
  customMenu.style.display = "block";
  customMenu.style.left = event.clientX + 'px';
  customMenu.style.top = event.clientY + 'px';
  cur_data.value = data
  cur_node.value = node
}

const CreateTree = () => {
  cur_father.value = cur_data.value.name
  form.father = cur_data.value.id
  dialogVisible.value = true
}

const CreateApi = () => {
  cur_father.value = cur_data.value.name
  form.father = cur_data.value.id
  emit("ChangeFather", cur_data.value, true)
}

const OnSubmit = async () => {
  if (cur_data.value) {
    if (!cur_data.value.childs) {
      cur_data.value.childs = []
    }
  }
  console.log(cur_data)
  var res = await meau.Create(form)
  var newChild = {id: res.data.id, childs: [], name: res.data.name}
  if (cur_data.value.length == 0) {
    tableData.value.push(newChild)
  }else{
    cur_data.value.childs.push(newChild)
  }


  dialogVisible.value = false
  dialogVisibleDir.value = false
}


const ListToolMeau = async () => {
  var res = await meau.List()
  await ConCatRes(res)
  tableData.value = res
}

const ConCatRes = async (res) => {
  for (var i in res) {
    res[i].childs = []
    if (res[i].childTools != undefined) {
      if (res[i].childTools.length > 0) {
        res[i].childs = await res[i].childs.concat(res[i].childTools)
      }
    }
    if (res[i].childMeaus != undefined) {
      if (res[i].childMeaus.length > 0) {
        res[i].childs = await res[i].childs.concat(res[i].childMeaus)
      }
    }
  }
  return res
}
const ListToolChild2 = async (id) => {
  var res = await meau.List({"id": id})
  var childs = []
  if (res.childTools != undefined) {
    if (res.childTools.length > 0) {
      childs = await childs.concat(res.childTools)
    }
  }
  if (res.childMeaus != undefined) {
    if (res.childMeaus.length > 0) {
      childs = await childs.concat(res.childMeaus)
    }
  }
  return await childs
}
</script>

<style scoped>
#custom-menu {
  display: none; /* 初始状态下不显示 */
  position: absolute;
  background-color: #f9f9f9;
  font-family: 微软雅黑;
  min-width: 120px;
  border-radius: 10px;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, .2);
  z-index: 9999;
}

#custom-menu ul li {
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
}

#custom-menu ul li:hover {
  background-color: rgba(194, 191, 191, 0.92);
}
</style>